﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橡树科技－JavaDemoSystem</title>
<link type="text/css" rel="stylesheet" media="all"
	href="../styles/global.css"
	tppabs="http://demo.mycodes.net/houtai/isoakJavaDemoSystem/styles/global.css" />
<link type="text/css" rel="stylesheet" media="all"
	href="../styles/global_color.css"
	tppabs="http://demo.mycodes.net/houtai/isoakJavaDemoSystem/styles/global_color.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/messages_zh.js"></script>
<script language="javascript" type="text/javascript">
$().ready(function() {//默认表单提交时验证
	// 在键盘按下并释放及提交后验证提交表单
  	$(".main_form").validate({
		//校验规则
	    rules: {
	   /*    firstname: "required", */
	    	roleName: {
		        required: true,//不能为空
		        rangelength:[1,16]//输入长度必须介于 6 和 20 之间的字符串（汉字算一个字符）。
			}
	    },
	  	//设置错误提示信息
	    messages: {
	/* 	    firstname: "请输入您的名字", */
		    roleName: {
		        required: "请输入角色名称",
		        rangelength: "请输入1-16位字符串"
	      	}	  
	    },
	    //设置错误信息存放地方
	    errorPlacement:function(error,element) {
	    	console.log(element);
	        error.appendTo(element.next().next());//将错误信息追加到id=name_msg的标签末尾（内部）
	    }
	});
});
	//保存成功的提示消息
	function showResult() {
		showResultDiv(true);
		window.setTimeout("showResultDiv(false);", 3000);
	}
    function showResultDiv(flag) {
	    var divResult = document.getElementById("save_result_info");
	    if(flag){
	    	divResult.style.display = "block";
	    } else {
	    	divResult.style.display = "none";
	    	//重定向到查询
	    	location.href="${pageContext.request.contextPath}/role/list";
	    }
    }

/* 	//做moduleInfo被选中的数据回显
	$(function(){
		//获取转发回来的当前role的所有权限--数组 使用','分割
		var moduleNames="${roleInfoVo.moduleNames}".split(",");
		//遍历数组，找到对应的多选框进行选中
		for(var i=0;i<moduleNames.length;i++){
			//jQuery的属性选择器 $("selector[name='value']")
			$("input:checkbox[id='"+moduleNames[i]+"']").attr("checked","checked");
		}
	}); */
	
	//设置菜单高亮显示
	$(function(){
		$(".role_off").attr("class","role_on");
	});
	
	   //校验角色名是否重复
	function  checkName() {
 		if(!$("#roleName").valid()){//校验
			return false;
		}; 
 		//设置验证的正则表达式
/* 		var reg=/^[0-9_a-zA-Z\u4e00-\u9fa5]{1,16}$/;
		//得到id为roleName的框判断是否符合固定格式
		if(!reg.test($("#roleName").val())){
			$("#name_msg").text("由16位以内的中，英文，数字以及下划线组成").css("color","red");
			return false;
		}  */
		//如果满足格式，再进行Ajax增加姓名的验重
		var flag=false;	
		$.ajax({
			url:"${pageContext.request.contextPath}/role/ajaxCheckName?roleName="+$("#roleName").val()+"&roleId="+$("#roleId").val(),
			type:"GET",
			datatype:"text",
			success:function(data){
				//进行ajax返回的数据处理
				if(data.trim()=="OK"){
					flag=true;
				}
			},
			async:false
		});
		
		if(flag){
			$("#name_msg").text("通过验证").css("color","green");
			return true;
		}else{
			$("#name_msg").text("此名称已经存在").css("color","red");
			return false;
		}
				
	}
	
	//校验模块是否被选中
	function checkModule() {
		//得到被选中的checkbox，如果没有被选中的，则验证失败
		if($(":checkbox:checked").length==0){
			$("#module_msg").text("至少选择一个权限").css("color","red");
			return false;
		}else{
			$("#module_msg").text("验证通过").css("color","green");
			return true;
		}
	}
	
	//提交
	function dataSubmit(){
		if(checkName()+checkModule()==2){
			$.ajax({
				url:"${pageContext.request.contextPath}/role/update",
				type:"post",
				data:$('.main_form').serialize(),
				dataType:"text",
				success:function(data){
					//进行ajax返回的数据处理
					if(data.trim() == "success"){
						showResult();//成功提示
					} else {
						alert("修改失败！");
					}
				}
			});
			
		}
	}
</script>
</head>
<body>

	<div id="header">
		<img src="../images/logo.png"
			tppabs="http://demo.mycodes.net/houtai/isoakJavaDemoSystem/images/logo.png"
			alt="logo" class="left" /> <a href="#">[退出]</a>
	</div>

	<div id="navi">
		<%@include file="/jsp/commen/menu.jsp" %>
	</div>
	<div id="main">

		<div id="save_result_info" class="save_success">保存成功！</div>
		<form action="${pageContext.request.contextPath }/role/modi" method="post" class="main_form">
			<!-- 一个隐藏框用来传递roleId的值 -->
			<input type="hidden" value="${roleInfoVo.roleId }" name="roleId" id="roleId" />
			<div class="text_info clearfix">
				<span>角色名称：</span>
			</div>
			<div class="input_info">
				<input type="text" class="width200" name="roleName" value="${roleInfoVo.roleName }" 
				id="roleName" onblur="checkName();" />
				<span class="required">*</span>
				<div class="validate_msg_medium" id="name_msg"><!-- 不能为空，且为20长度的字母、数字和汉字的组合 --> </div>
			</div>
			<div class="text_info clearfix">
				<span>设置权限：</span>
			</div>
			<div class="input_info_high">
				<div class="input_info_scroll">
					<ul>
						<c:forEach items="${moduleInfos }" var="moduleInfo">
							<li><input type="checkbox" name="moduleId" value="${moduleInfo.moduleId }" id="${moduleInfo.name }" <c:if test="${fn:contains(roleInfoVo.moduleNames, moduleInfo.name)}">checked</c:if> />${moduleInfo.name }</li>
						</c:forEach>
					</ul>
				</div>
				<span class="required">*</span>
				<div class="validate_msg_tiny" id="module_msg"><!-- 至少选择一个权限 --></div>
			</div>
			<div class="button_info clearfix">
				<input type="button" value="保存" class="btn_save"
					onclick="dataSubmit();" /> 
				<input type="button" value="取消" class="btn_save" onclick="history.back();"/>
			</div>
		</form>
	</div>

	<div id="footer">
		<span>[源自橡树的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</span> <br /> <span>版权所有(C)橡树信息科技有限公司
		</span>
	</div>
</body>
</html>
